<template>
  <div class="procurement_wrapper">
    <div class="breadcrumb">
      <router-link :to="{name: 'memberCenter'}" class="bread_a">个人中心</router-link> <i class="el-icon-arrow-right"></i>
      我的采购额
    </div>
    <div class="procurement_box">
      <div class="procurement_money">
        <p class="date" v-if="levelInfo.level != 1">清算时间: {{levelInfo.endTime}}</p>
        <span class="tit">当前采购额</span>
        <h3 class="money">¥{{formatMoney(levelInfo.amount)}} </h3>
        <span class="tag">（清算日结算90天内的采购额）</span>
      </div>
      <div class="procurement_progress">
        <div class="progress_tag">
          <template v-for="(item, ind) in levelVOS">
            <div class="dot" :style="{'left':levelWidthArr[ind]}">
              v{{item.level}}
              <p>{{item.amount}}</p>
            </div>
          </template>
        </div>
        <div class="progress_bar">
          <template v-for="(dot, ind) in levelVOS">
             <span class="dot" :class="{'active': levelInfo.level > ind || levelInfo.level === 0}" :style="{'left':levelWidthArr[ind]}"></span>
          </template>
          <div class="progress_fill" :style="{width: barWidth}"></div>
        </div>
      </div>
      <div class="line" v-if="false"></div>
      <div class="procuremen_table" v-if="false">
        <h1 class="title">采购额明细</h1>
        <el-table :data="procurementList" height="250" style="width: 100%" header-row-class-name="table_thead_style">
          <el-table-column
            style="padding-left: 50px;"
            label="时间"
            prop="createTime">
          </el-table-column>
          <el-table-column label="来源" prop="origin">
          </el-table-column>
          <el-table-column
            label="采购额"
            prop="money">
          </el-table-column>
        </el-table>
      </div>
      <div class="line"></div>
      <div class="ad_box_block">
        <div class="qrcode">
          <img src="../../../images/qrcode.jpg" height="126" width="126" />
        </div>
        <h2 class="text_big">扫码关注微信公众号</h2>
        <p class="text_small">百万优惠 无限礼包 随意拿</p>
      </div>
    </div>
  </div>
</template>

<script>
import {Breadcrumb, BreadcrumbItem, Table, TableColumn} from 'element-ui'
import {mapState, mapActions} from 'vuex'
import {formatMoney} from '@/tool/tool'
export default {
  components: {
    elBreadcrumb: Breadcrumb,
    elBreadcrumbItem: BreadcrumbItem,
    elTable: Table,
    elTableColumn: TableColumn
  },
  data () {
    return {
      // levelWidthArr: [], // 等级百分比
      barWidth: '', // 进度条宽度
      procurementList: []
    }
  },
  computed: {
    ...mapState({
      levelInfo: state => state.levelInfoObj,
      levelVOS: state => state.levelVOS
    }),
    formatMoney () {
      return formatMoney
    },
    levelWidthArr () {
      let _arr = []
      let len = this.levelVOS.length
      let lastAmount = this.levelVOS[len - 1]['amount']

      let calc = Number(this.levelInfo.amount / lastAmount * 100).toFixed(2)
      this.barWidth = calc + '%'

      this.levelVOS.map((item, inx) => {
        let result = Number(item.amount / lastAmount * 100 - 1.2).toFixed(2)
        _arr.push(result + '%')
      })
      return _arr
    }
  },
  methods: {
    ...mapActions(['getUserLevelInfo'])
  },
  mounted () {
    console.log(this.levelVOS.length)
    if (!this.levelVOS.length) {
      console.log('shuaxin')
      this.getUserLevelInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
  .bread_nav{
    margin: 15px 0;
  }
  .procurement_box{
    background: #ffffff;
  }
  .procurement{
    &_money{
      padding: 40px 0 40px;
      text-align: center;
      box-sizing: border-box;
      .date{
        @include fontbase(#3A3A3A, 14px, 22px);
        margin-bottom: 5px;
      }
      .tit{
        display: inline-block;
        @include fontbase(#666666, 18px, 25px);
        margin-bottom: 40px;
      }
      .money{
        @include fontbase(#333333, 40px, 56px);
        margin-bottom: 10px;
      }
      .tag{
        display: inline-block;
        padding: 10px 24px;
        background: #EDEDED;
        @include fontbase(#3A3A3A, 14px, 20px);
      }
    }
  }
  .procurement_progress{
    position: relative;
    margin-bottom: 50px;
    height: 90px;
    .progress_tag{
      position: relative;
      width: 100%;
      color: #666666;
      line-height: 50px;
      .dot{
        position:absolute;
        display: inline-block;
        margin-left: -10px;
        text-align: center;
      }
    }
    .progress_bar{
      position: absolute;
      top: 45px;
      width: 100%;
      height: 10px;
      border-radius: 7px;
      background: #F4F4F4;
      overflow: hidden;
      .dot{
        z-index: 5;
        width: 1.2%;
        height: 10px;
        border-radius: 50%;
        background: #D8D8D8;
        display: inline-block;
        position: absolute;
        
        &:nth-child(1){
          left: 5.5%;
        }
        &:nth-child(2){
          left: 24.5%;
        }
        &:nth-child(3){
          left: 48.5%;
        }
        &:nth-child(4){
          left: 73.5%;
        }
        &:nth-child(5){
          left: 92.5%;
        }
      }
      .active{
        background: #CBA200;
      }
    }
    .progress_fill{
      position: absolute;
      left: 0;
      top: 0;
      background: #FFCC00;
      border-radius: 7px;
      width: 40%;
      height: 10px;
      z-index:1;
    }
  }
  .procuremen_table{
    margin: 0 -52px 45px;
    .title{
      @include fontbase(#333333, 18px, 25px);
      padding: 37px 0 20px 50px;
    }
  }
  
</style>
<style>
  .el-table__row .aaa, .table_thead_style .bbb{
    padding-left: 50px;
  }
</style>

